<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>文章看看</title>
    <style>
        *{background: #FFFFCC;}
        #mainDiv{font-size:4vw;}
        #mainSelect,#textBox{font-size:5vw;}
        #mainSelect{width: 100%;}
        #tail,#musicBox{text-align: center;}
        #musicBox{display: none;}
    </style>
    <link rel="shortcut icon" href="#" />
</head>
<body>
    <div id="mainDiv">
        我写过的一些文章，我把它们整理在这里，方便阅读。
        <br/>
        <select id="mainSelect" onchange="touchFunction()">
            <option value="-1">选择文章</option>
        </select>
        <br/>
        <div id="musicBox">
            <a href="javascript:musicFunction()" target="_self" id="musicSwitch">播放语音</a>
            <br/>
        </div>
        <div id="textBox">加载中…</div>
        <br/>
        <div id="tail">2020-11-4  Version alpha8</div>
    </div>
    <audio id="music"></audio>
    <script type="text/javascript" src="decrypt.js"></script>
    <script type="text/javascript">
    
    //获取控件
    var select = document.getElementById("mainSelect");
    var textbox = document.getElementById("textBox");
    var voicehandle = document.getElementById("music");
    var musicswitch = document.getElementById("musicSwitch");
    var musicBox = document.getElementById("musicBox");

    //初始化json
    window.onload = function () {
        var nowTime = new Date().getTime();//获取当前时间作为随机数
        var url = "document.json?time=" + nowTime;/*json文件url，本地的就写本地的位置，如果是服务器的就写服务器的路径*/
        var request = new XMLHttpRequest();
        request.open("GET", url);/*设置请求方法与路径*/
        request.send(null);/*不发送数据到服务器*/
        request.onload = function () {/*XHR对象获取到返回信息后执行*/
            if (request.status == 200) {/*返回状态为200，即为数据获取成功*/
                documentJson = JSON.parse(request.responseText);//转json
                //
                var pageurl = location.href;//提取网址
                var keywordlocation = pageurl.indexOf("to=");//查找to关键字
                var toindex = undefined;
                if (keywordlocation != -1) {
                    toindex = pageurl.slice(keywordlocation + 3);
                }
                //
                for (var i = 0; i < documentJson.main.length; i++) {
                    var group = document.createElement('OPTGROUP');
                    group.label =  documentJson.main[i].category;
                    select.appendChild(group);
                    for (var j = 0; j < documentJson.main[i].collection.length; j++) {
                        var setindex = 1000 * i + j;
                        group.appendChild(new Option(documentJson.main[i].collection[j].title, setindex, null,setindex == toindex));
                    }
                }
            document.getElementById("tail").innerHTML += "&emsp;" + documentJson.varsionName;
            textbox.innerHTML = "点击上面选择文章";
            touchFunction();
            }
        }
    }
    
    //更改选项的方法
    function touchFunction(){
        var index = select.options[select.selectedIndex].value;
        var classNum = Math.floor(index / 1000);
        var itemNum = index % 1000;
        if (index != -1) {
            if (documentJson.main[classNum].collection[itemNum].voice) {//有语音，切换
                voicehandle.src = documentJson.main[classNum].collection[itemNum].voice;
                musicswitch.innerHTML = "播放语音";
                musicBox.style.display = "block";
            } else {//无语音，停止
                voicehandle.pause();
                voicehandle.currentTime = 0;
                musicBox.style.display = "none";
            }
            if (documentJson.main[classNum].collection[itemNum].encode) {
                var docpassword = prompt("请输入文档密码");
                if (docpassword != null && docpassword != ""){
                    textbox.innerHTML = panDecrypt(documentJson.main[classNum].collection[itemNum].content, docpassword);
                }else{
                    textbox.innerHTML = "未输入密码";
                }
            } else {
                textbox.innerHTML = documentJson.main[classNum].collection[itemNum].content;
            }
            
        }
    }

    //点击语音标签的方法
    function musicFunction(){
        if (voicehandle.paused) {
            musicswitch.innerHTML = "暂停语音";
            voicehandle.play();
        } else {
            musicswitch.innerHTML = "播放语音";
            voicehandle.pause();
        }
    }

    //语音播放结束
    voicehandle.addEventListener('ended', function () {  
        musicswitch.innerHTML = "播放语音";
    }, false);

    </script>
    <script type="text/javascript" src="ua.js"></script>
    <!-- 引入判断平台的js -->
</body>
</html>